<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { getActivityList } from "@/request/api";
import { InitData } from "@/type/active";
import { useRouter } from "vue-router";

/* eslint-disable */
export default defineComponent({
  setup() {
    const data = reactive(new InitData());
    const router = useRouter();

    const fetchData = () => {
      getActivityList(data.selectData).then((res) => {
        console.log("activeList:", res);

        data.activeData = res.data.data.records;  // 更新响应式数据
        data.total = res.data.total;
      });
    };

    const currentChange = (val: number) => {
      data.selectData.page = val;
      fetchData();
    };

    const sizeChange = (val: number) => {
      data.selectData.pageSize = val;
      fetchData();
    };

    const onSubmit = () => {
      data.selectData.page = 1;
      fetchData();
    };

    const resetForm = () => {
      data.selectData.page = 1;
      data.selectData.type = "";
      data.selectData.scope = "";
      data.selectData.name = "";
      fetchData();
    };

    fetchData();

    const handleEdit = (row: any) => {
      router.push({ name: 'activeDetail', params: { id: row.activeId } });
      console.log("查看详情:", row);
    };


    return {
      ...toRefs(data),
      fetchData,
      currentChange,
      sizeChange,
      onSubmit,
      resetForm,
      handleEdit,
    };
  },
});
</script>

<template>
  <div class="active-list-view">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="活动名称">
        <el-input v-model="selectData.name" placeholder="请输入活动名称" clearable />
      </el-form-item>
      <el-form-item label="活动类型">
        <el-select v-model="selectData.type" placeholder="请选择活动类型" clearable>
          <el-option label="全部" value="all" />
          <el-option label="劳动实践" value="labor_practice" />
          <el-option label="创新创业" value="innovation_entrepreneurship" />
          <el-option label="思想成长" value="ideological_growth" />
          <el-option label="社会实践" value="social_practice" />
          <el-option label="文艺体育" value="arts_sports" />
          <el-option label="志愿公益" value="volunteer_public_benefit" />
          <el-option label="工作履历" value="work_experience" />
          <el-option label="技能特长" value="skill_specialty" />
        </el-select>
      </el-form-item>
      <el-form-item label="活动范围">
        <el-select v-model="selectData.scope" placeholder="请选择活动范围" clearable>
          <el-option label="全部" value="all" />
          <el-option label="院级" value="institute" />
          <el-option label="班级" value="class" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 活动列表卡片 -->
    <div class="card-container">
      <div
        v-for="activity in activeData"
        :key="activity.activeId"
        class="activity-card"
        @click="handleEdit(activity)"
      >
        <div class="card-header">
          <h3>{{ activity.name }}</h3>
        </div>
        <div class="card-body">
          <p class="ellipsis">{{ activity.description }}</p>
          <div class="card-details">
            <span>活动类型: {{ activity.type }}</span>
            <span>活动范围: {{ activity.scope }}</span>
            <span>开始时间: {{ activity.beginTime }}</span>
            <span>结束时间: {{ activity.endTime }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next, sizes"
      :total="total"
      :current-page="selectData.page"
      :page-size="selectData.pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
  </div>

</template>

<style scoped lang="scss">
.demo-form-inline .el-input,
.demo-form-inline .el-select {
  width: 200px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.activity-card {
  width: calc(33.333% - 20px);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .card-header {
    padding: 16px;
    background-color: #f0f2f5;
    border-bottom: 1px solid #ebeef5;

    h3 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }
  }

  .card-body {
    padding: 16px;

    .ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 10px;
      color: #606266;
    }

    .card-details {
      span {
        display: block;
        margin-bottom: 5px;
        color: #909399;
        font-size: 14px;
      }
    }
  }
}
</style>
